<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/order'}">订单</el-breadcrumb-item>
				<el-breadcrumb-item>修改订货单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end  面包屑-->

		<div class="order al" id="order">
			<div class="order-tab">
				<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
					<col width="4.5%" />
					<col width="4.5%" />
					<col width="8%" />
					<col width="15%" />
					<col width="18%" />
					<col width="10%" />
					<col width="5%" />
					<col width="12%" />
					<col width="12%" />
					<col width="8%" />
					<col width="8%" />
					<col width="8%" />
					<tr class="tab-th">
						<td>序号</td>
						<td>主图</td>
						<td>商品编码</td>
						<td>商品名称</td>
						<td>规格</td>
						<td>数量</td>
						<td>单位</td>
						<td>单价</td>
						<td>小计</td>
						<td>备注</td>
					</tr>
					<tr class="hoverTr" v-for="(item, index) in items">
						<td :class="{active:items.length>1}">
							<span class="orderNum">
								{{item.nom}}
							</span>
							<span class="orderAdd">
								<em class="iconfont" @click="minus(index,item.goodsCode)">&#xe684;</em>
							</span>
						</td>
						<td><img :src="item.goodsBigPic" v-if="item.goodsBigPic!=''"><em class="iconfont" style="color: #aaa;font-size: 30px;" v-else>&#xe714;</em></td>
						<td>{{item.goodsCode}}</td>
						<td>{{item.goodsname}}</td>
						<td>{{item.goodsSkuValue}}</td>
						<td><input class="order-input1" @blur="shuliang(index,item.goodsNum,item.goodsSalePrice,item.goodsCode)" @keyup="sum(index,item.goodsNum,item.goodsSalePrice,item.goodsCode)" v-model="item.goodsNum"></td>
						<td>{{item.goodsNumUnit}}</td>
						<td>{{item.goodsSalePrice}}</td>
						<td>{{item.goodsxiaji}}</td>
						<td>
							<template>
								<el-button type="text" class="textEll" @click="addbeizhu(index)">
									<em v-if="item.goodsRemark == '' || item.goodsRemark == null " class="iconfont">&#xec52;</em>
									<span v-else><em class="iconfont">&#xe617;</em>{{item.goodsRemark}}</span>
								</el-button>
								<div class="beizhu-box">
									<el-dialog title="添加商品备注" :visible.sync="dialogFormVisible">
										<el-form :model="form">
											<el-input type="textarea" v-model="form.note" auto-complete="off" :maxlength="250" class="addbeuzhu" placeholder="备注信息最多不超过250个字"></el-input>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button type="primary" @click="confirnBtn">确 定</el-button>
											<el-button @click="cancelBtn">取 消</el-button>
										</div>
									</el-dialog>
								</div>
							</template>
						</td>
					</tr>
					<tr class="hoverTr">
						<td>
						</td>
						<td colspan="3">
							<template>
								<el-select @change="addGoods" v-model="value2" filterable placeholder="输入编码/商品名称">
									<el-option v-for="item in options2" :key="item.value2" :disabled="item.disabled" :label="item.goodsName + ' ( '+  item.goodsSkuValue + ' )'" :value="item.goodsCode">
									</el-option>
								</el-select>
							</template>
							<em class="iconfont" style="position: absolute;right: 8px;top: 10px;cursor: pointer;display: none;">&#xe607;</em>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr class="dorder-td hoverTr">
						<td>合计</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>{{totalnum}}</td>
						<td></td>
						<td></td>
						<td>{{valuesum}}</td>
						<td></td>

					</tr>
					<tr class="dorder-tend">
						<td colspan="10">
							<p v-if="isSpecial">
								<el-checkbox v-model="isSpecial" disabled @change="shenqing">请输入获批订单金额 </el-checkbox>
								<input v-model="specialMoney" @change="sumSpecialMoney" @keyup="vFun_specialMoney" /></p>
							<!--<p><em class="iconfont" style="font-size: 12px;">&#xe617;</em>运费：<span>{{orderTotalFreight}}</span></p>-->
							<p v-if='isSpecial'>应付金额：<span> {{specialMoney}}</span></p>
							<p v-if='!isSpecial'>应付金额：<span> {{valuesum}}</span></p>
						</td>
					</tr>
				</table>
			</div>

			<div class="order-deta">
        <el-button type="primary" :disabled="clickBtn"  @click="update">保存</el-button>
        <el-button @click="$router.push({path:'/orderDatalis'})">取消</el-button>
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data() {
			return {
        clickBtn:false,                 //请求数据后禁用按钮
				specialMoney: null, // 特价金额
				disad: true,
				cookieOrderCode: "", // 订单编号
				options2: [], // 所有可购商品
				items: [], // 订单商品详情对象
				value2: '', // 选择的商品编号
				valuesum: 0, // 合计金额
				totalnum: 0, // 总购买量
				orderTotalFreight: 0, // 运费(暂定)
				isSpecial: false, // 是否特价  false否，true是
				goodsObject: [],
				form: { //备注
					note: '',
				},
				dialogFormVisible: false, //备注弹出层
				goodsIndex: 0 //商品的Index
			}
		},
		created() {
			this.cookieOrderCode = this.Public.getCookie("orderCode");
		},
		mounted() {
			//获取窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("order");
			cont.style.height = winHieg - 105 + "px";
			//查询订单和当前资金账户详情
			this.axios({
				method: 'GET',
				url: "/v3/sale/orders/" + this.cookieOrderCode
			}).then((res) => {
				var data = res.data;
				var saleOrderGoodsDataList = res.data.saleOrderGoodsDataList;

				this.isSpecial = data.orderApplySpecial == 1 ? true : false;
				this.valuesum = data.orderTotalMoney; // 总订单金额
				if(data.orderApplySpecial == 1){
					this.specialMoney = (data.orderSpecialMoney).toFixed(2); // 订单特价
				}
				this.orderTotalFreight = data.orderTotalFreight; // 运费
				if(saleOrderGoodsDataList != null) {
					for(var i = 0; i < saleOrderGoodsDataList.length; i++) {
						this.items.push({
							nom: this.items.length + 1,
							goodsBigPic: saleOrderGoodsDataList[i].goodsBigPic,
							goodsCode: saleOrderGoodsDataList[i].goodsCode,
							goodsname: saleOrderGoodsDataList[i].goodsName,
							goodsSkuValue: saleOrderGoodsDataList[i].goodsSkuValue,
							goodsNum: saleOrderGoodsDataList[i].goodsBuyNum,
							goodsNumUnit: saleOrderGoodsDataList[i].goodsNumUnit,
							goodsRemark: saleOrderGoodsDataList[i].goodsRemark,
							goodsSalePrice: saleOrderGoodsDataList[i].goodsSalePrice.toFixed(2),
							goodsxiaji: (saleOrderGoodsDataList[i].goodsBuyNum * saleOrderGoodsDataList[i].goodsSalePrice).toFixed(2)

						});
					}
					this.Valuesum();
					this.queryOrderGoods();
				}
			}).catch((err) => {
				this.Public.openError(this, err.response.data)
			});

		},
		methods: {
			confirnBtn() { //备注弹出框的确定按钮
				this.dialogFormVisible = false; //关闭弹出框
				this.items[this.goodsIndex].goodsRemark = this.form.note; //把输入的内容赋值给商品的备注
				this.form.note = ""; //清空输入框里的内容
			},
			cancelBtn() { //备注弹出框的取消按钮
				this.dialogFormVisible = false;
			},

			// 查询订单商品
			queryOrderGoods() {
				this.axios({
					method: 'post',
					url: "/v3/sale/goodss/listAll",
					data: {}
				}).then((res) => {
					this.options2 = res.data.list;
					for(var i = 0; i < this.items.length; i++) {
						var goodsObject = this.options2.filter((p) => {
							return p.goodsCode == this.items[i].goodsCode;
						});
						this.$set(goodsObject[0], "disabled", true); // 置灰
					}
				}).catch((err) => {
					this.Public.openError(this, err.response.data)
				});
			},

			vFun_specialMoney() { //特价提示
				if(this.specialMoney == "") {
					this.tejia = true;
				} else {
					this.tejia = false;
				}
			},
			//----------申请特价  start----------------------
			shenqing() {
				this.disad = !this.disad;
				if(this.disad) {
					this.tejia = false
				} else {
					this.tejia = true
				}
				if(this.disad) {
					var sumPrice = 0;
					for(var i = 0; i < this.items.length; i++) {
						sumPrice += Number(this.items[i].goodsxiaji);
					}
					this.valuesum = sumPrice.toFixed(2);
					this.specialMoney = null;
				}
			},
			sumSpecialMoney() {
				var sumPrice = this.specialMoney;
				if(isNaN(sumPrice)) {
					this.$notify.error({
						message: '请输入正确的特价金额',
					});
					return;
				}
				sumPrice = Number(sumPrice).toFixed(2);
				this.specialMoney = sumPrice;
			},
			//-----------选择购买商品  start-------------------
			update(){
				var orderGoodsArray = [];	// 选购商品列表
				var orderTotalNum = 0; 		// 订单总数量
				for(var i=0; i<this.items.length;i++){
					orderTotalNum += this.items[i].goodsNum;
					var jsonList = {
						"goodsCode": this.items[i].goodsCode, // 商品编号
						"goodsOrderNum": this.items[i].goodsNum, // 购买数量
						"goodsRemark": this.items[i].goodsRemark // 购买备注
					}
					orderGoodsArray.push(jsonList);
				}
				var orderTotalMoney = this.valuesum; // 正常价
				if(this.isSpecial) { // 特价处理
					orderTotalMoney = this.specialMoney;
				}
        this.clickBtn=!this.clickBtn;
				this.axios({
					method: 'post',
					url: "/v3/sale/orders/update",
					data:{
						"orderCode":this.cookieOrderCode,				// 订单编号
						"orderTotalMoney":orderTotalMoney,				// 订单金额
						"orderTotalNum":orderTotalNum,
						"orderSpecialMoney":orderTotalMoney,			// 特价金额
						"orderUnpaidMoney":orderTotalMoney,				// 待支付金额 = 订单金额（或者特价金额）
						"orderTotalFreight":this.orderTotalFreight,		// 运费
						"orderGoodsStr":JSON.stringify(orderGoodsArray)	// 购买商品集合JSON
					}
				}).then((res) => {
					this.$notify({
						message: '操作成功！',
						type: 'success'
					});
          this.clickBtn=!this.clickBtn;
					window.history.go(-1);
				}).catch((err) => {
          this.clickBtn=!this.clickBtn;
					this.Public.openError(this, err.response.data)
				});
			},
			//-----------选择购买商品  start-------------------
			addGoods(goodsCode) {
				if(goodsCode) {
					this.goodsObject = this.options2.filter((p) => {
						return p.goodsCode == goodsCode;
					});
					this.$set(this.goodsObject[0], "disabled", true); // 置灰已选择
					if(goodsCode != null && goodsCode != "") {
						this.axios({
							method: 'GET',
							url: "/v3/sale/goodss/" + goodsCode
						}).then((res) => {
							this.items.push({
								nom: this.items.length + 1,
								goodsBigPic: res.data.list[0].goodsBigPic,
								goodsCode: res.data.list[0].goodsCode,
								goodsname: res.data.list[0].goodsName,
								goodsSkuValue: res.data.list[0].goodsSkuValue,
								goodsNum: 1, // 默认购买量为1
								goodsNumUnit: res.data.list[0].goodsNumUnit,
								goodsRemark: null,
								goodsSalePrice: res.data.list[0].goodsSalePrice,
								goodsxiaji: res.data.list[0].goodsSalePrice.toFixed(2)
							});
							this.Valuesum();
						}).catch((err) => {
							this.Public.openError(this, err.response.data)
						});
						this.value2 = '';
					};
				}
			},

			//-----------应付金额金额  start-------------------
			Valuesum() {
				var sumPrice = 0;
				var sumtotal = 0;
				if(this.items.length > 0) {
					for(var i = 0; i < this.items.length; i++) {
						sumPrice += Number(this.items[i].goodsxiaji);
						sumtotal += Number(this.items[i].goodsNum);
					}
				}
				this.totalnum = sumtotal;

				this.valuesum = sumPrice.toFixed(2);

			},
			//-----------控制数量不能小于0  start-------------------
			shuliang(index) {
				if(isNaN(this.items[index].goodsNum)) {
					this.$notify.error({
						message: '请输入数量',
						duration: 3000
					})
				}
				if(this.items[index].goodsNum <= 0) {
					this.$notify.error({
						message: '数量不能小于1',
						duration: 3000
					})

				}
			},

			//-----------小计单笔商品金额  start-------------------
			sum(index, goodsNum, goodsSalePrice, goodsCode) {
				var xiaojiPrice = this.items.filter((p) => {
					return p.goodsCode == goodsCode;
				});
				if(isNaN(goodsNum) || isNaN(goodsSalePrice)) {
					this.totalnum = 0;
					this.valuesum = 0;
					xiaojiPrice[0].goodsxiaji = 0;
					return;
				} else {
					xiaojiPrice[0].goodsxiaji = goodsSalePrice * goodsNum;
					xiaojiPrice[0].goodsxiaji = xiaojiPrice[0].goodsxiaji.toFixed(2);
				}
				this.Valuesum();
			},

			// 减商品
			minus(index, goodsCode) {
				this.items.splice(index, 1);
				var goodsObject = this.options2.filter((p) => {
					return p.goodsCode == goodsCode;
				});
				this.$set(goodsObject[0], "disabled", false); // 取消置灰
				this.Valuesum();
				for(var i = 0; i < this.items.length; i++) {
					if(i >= index) {
						this.items[i].nom = this.items[i].nom - 1; // 数组序号处理
					}

				}
			},
			//添加备注
			addbeizhu(index) {
				this.form.note = this.items[index].goodsRemark;
				this.dialogFormVisible = true;
				this.goodsIndex = index;
			},
		},

	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.order-tab {
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}

	.order-tab1 td {
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left: 0;
		position: relative;
	}

	.order-tab1 td img {
		width: 45px;
		margin: 0 auto;
	}

	.order-tab1 .tab-th td {
		background: #eff1f8;
		padding: 14px 0;
	}

	.order-tab1 .order-input1 {
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-align: center;
	}

	.dorder-td td {
		padding: 15px 0;
	}

	.dorder-tend td {
		padding: 12px 15px;
		text-align: right;
	}

	.dorder-tend p span {
		display: inline-block;
		width: 120px;
	}

	.dorder-tend p:last-child span {
		color: #f33333;
		font-size: 20px;
	}

	.dorder-tend p {
		margin-top: 0px;
	}

	.dorder-tend input {
		width: 100px;
		height: 32px;
		box-sizing: border-box;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-align: center;
		margin-left: 20px;
	}

	.order-deta {
		position: fixed;
		bottom: 10px;
		padding-bottom: 10px;
		width: 100%;
		background: #fff;
	}

	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.orderAdd {
		display: none;
	}

	.hoverTr:hover .active .orderNum {
		display: none;
	}

	.hoverTr:hover .active .orderAdd {
		display: inline-block;
	}

	.hoverTr td {
		height: 54px;
		padding: 0;
	}

	.textEll {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
